<template>
  <div class="activity-raffle" v-loading="loading">
    <el-tabs v-model="activityTab" class="center-tabs" :before-leave="beforeLeave" :style="detail=='N'?'pointer-events: none':''">
      <el-tab-pane label="基本配置" name="field" />
      <el-tab-pane label="奖品配置" name="form" />
      <!-- <el-tab-pane name="CustoBtn" v-if="activityTab !== 'form'"> -->
        <!-- <span slot="label"><el-button size="small" type="primary">下一步</el-button></span> -->
      <!-- </el-tab-pane> -->
      <!-- <el-tab-pane  name="CustoBtn2" v-if="activityTab === 'form'"> -->
        <!-- <span slot="label">
          <el-button size="small" type="primary">上一步</el-button>
          <el-button size="small" type="primary">保存</el-button>
        </span> -->
      <!-- </el-tab-pane> -->
    </el-tabs>
    <div>
      <el-scrollbar class="right-scrollbar" style="height: calc(100vh - 100px); padding-right: 20px;" :hide="true">
        <el-form v-if="activityTab==='field'" size="small" label-width="110px" :rules="formConfRules" :inline="true">
          <el-row :gutter="24" style="position: relative">
              <!-- 活动基本信息 -->
            <el-col :xs="24" :md="12" :lg="11">
                <el-card style="margin-bottom: 32px;height: 300px;">
                  <div slot="header">
                    <span><i class="el-icon-collection"></i> 活动基本信息</span>
                  </div>
                  <el-form-item label="活动名称" prop="activityName">
                    <el-input :maxlength="50" :disabled="detailFlage" style="width: 240px" v-model="formConf.activityName" placeholder="请输入活动名称" clearable></el-input>
                    <span class="tips">{{formConf.activityName.length+'/50'}}</span>
                  </el-form-item>
                  <el-form-item label="页面标题" prop="activityTitle">
                    <el-input :disabled="detailFlage" style="width:240px" v-model="formConf.activityTitle" placeholder="请输入标题" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="活动承接平台" prop="activityPlatform">
                    <!-- <el-select
                     :disabled="detailFlage"
                      v-model="formConf.activityPlatform"
                      placeholder="请选择活动承接平台"
                      clearable
                      style="width: 240px"
                    >
                      <el-option
                        v-for="dict in dict.type.sys_normal_disable"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select> -->
                    <el-input :disabled="detailFlage" style="width:240px" v-model="formConf.activityPlatform" placeholder="请输入活动承接平台" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="有效期间" prop="dateRange">
                    <el-date-picker
                      :disabled="detailFlage"
                      v-model="dateRange"
                      @change="dateRangeChange"
                      style="width:300px"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      range-separator="-"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      :default-time="['00:00:00', '23:59:59']"
                    ></el-date-picker>
                  </el-form-item>
              </el-card>
            </el-col>
            <!-- 活动权限信息 -->
            <el-col :xs="24" :md="24" :lg="13">
              <el-card style="margin-bottom: 32px;height: auto;">
                  <div slot="header">
                    <span><i class="el-icon-collection"></i> 活动权限信息</span>
                  </div>
                  <el-form-item label="机构" prop="organId">
                    <!-- <el-select
                      v-model="formConf.organId"
                      placeholder="请选择机构"
                      clearable
                      style="width:300px"
                    >
                      <el-option
                        v-for="dict in dict.type.sys_normal_disable"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select> -->
                    <el-cascader
                      style="width: 240px"
                      clearable
                      :disabled="detailFlage"
                      @change="strategyOrganChange"
                      :options="organizationList"
                      :props="organizationList_props"
                      v-model="strategyOrgan"
                      :show-all-levels="false"
                      placeholder="请选择组织机构"
                    >
                    </el-cascader>
                  </el-form-item>
                  <el-form-item label="用户权限" prop="userRight">
                    <el-radio-group v-model="formConf.userRight">
                      <el-radio :disabled="detailFlage" v-for="item in userRightList" :key="item.key" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="渠道" prop="channelCode">
                    <el-select
                      :disabled="detailFlage"
                      v-model="formConf.channelCode"
                      placeholder="请选择渠道"
                      clearable
                      style="width: 240px"
                    >
                      <el-option
                        v-for="dict in channelList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item class="carouselImage" label="轮播图" prop="formRef1" style="width:100%">
                    <!-- <span slot="label">
                      <span style="color: #FF574C;margin-right: 4px;">*</span>
                      <span>轮播图</span>
                    </span> -->
                    <!--  -->
                    <!-- :auto-upload="false" -->
                    <el-upload
                      ref="uploadFile"
                      :on-change="onChange"
                      style="width:100%"
                      action=""
                      :auto-upload="false"
                      class="upload-demo"
                      :limit="1"
                      :disabled="detailFlage"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      list-type="picture">
                      <el-button :disabled="detailFlage" type="primary" icon="el-icon-upload" size="mini">导入</el-button>
                      <span slot="tip" style="font-size: 12px;margin-left:16px">支持扩展名:jpg、png 图片尺寸：710*240px</span>
                    </el-upload>
                  </el-form-item>
                  <el-form-item class="carouselImage" label="弹窗" prop="formRef1"  style="width:100%">
                    <el-upload
                      ref="uploadFile2"
                      class="upload-demo"
                      :limit="1"
                      :on-change="onChange2"
                      action=""
                      :auto-upload="false"
                      :on-preview="handlePreview2"
                      :on-remove="handleRemove2"
                      :file-list="fileList2"
                      :disabled="detailFlage"
                      list-type="picture">
                      <el-button :disabled="detailFlage" type="primary" icon="el-icon-upload" size="mini">导入</el-button>
                      <span slot="tip" style="font-size: 12px;margin-left:16px">支持扩展名:jpg、png 图片尺寸：300*400px</span>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="模板" prop="template"  style="width:100%">
                    <el-radio-group v-model="formConf.template" style="display: flex;margin-top:8px">
                      <div class="columnCenter"  style="margin-right: 72px;" v-for="(item,index) in templateList" :key="item.index">
                        <img style="width: 80px;height: 158px;" :src="imgsUrl[index]" alt="light">
                        <el-radio :disabled="detailFlage" :label="item.value" style="margin-top: 16px;">{{item.label}}</el-radio>
                      </div>
                      <!-- <div class="columnCenter"  style="margin-right: 72px;">
                        <img src="@/assets/images/九宫格.png" alt="light">
                        <el-radio label="0" style="margin-top: 16px;">扭蛋机</el-radio>
                      </div>
                      <div class="columnCenter"  style="margin-right: 72px;">
                        <img src="@/assets/images/九宫格.png" alt="light">
                        <el-radio label="2" style="margin-top: 16px;">抽奖箱</el-radio>
                      </div> -->
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="皮肤" prop="skin" style="margin-top:16px;width:100%">
                    <el-radio-group v-model="formConf.skin" style="display: flex;margin-top:8px">
                      <div class="columnCenter"  style="margin-right: 72px;" v-for="(item,index) in skinList" :key="item.index">
                        <img style="width: 80px;height: 158px;" :src="imgsUrl2[index]" alt="light">
                        <el-radio :disabled="detailFlage" :label="item.value" style="margin-top: 16px;">{{item.label}}</el-radio>
                      </div>
                      <!-- <div class="columnCenter"  style="margin-right: 72px;">
                        <img src="@/assets/images/九宫格.png" alt="light">
                        <el-radio label="0" style="margin-top: 16px;">版式2</el-radio>
                      </div>
                      <div class="columnCenter"  style="margin-right: 72px;">
                        <img src="@/assets/images/九宫格.png" alt="light">
                        <el-radio label="2" style="margin-top: 16px;">版式3</el-radio>
                      </div> -->
                    </el-radio-group>
                    <div style="margin-top: 16px;">
                      <span class="tips" style="font-size: 12px;margin-left: 0px;">注：不同模板展示</span>
                    </div>
                  </el-form-item>
              </el-card>
            </el-col>
            <!-- 活动说明 -->
            <el-col :xs="24" :md="24" :lg="11"  style="position: absolute;top: 325px;left: 0px;">
              <el-card style="margin-bottom: 32px;height: 350px;">
                <div slot="header">
                  <span><i class="el-icon-collection"></i> 活动权限说明</span>
                </div>
                <el-form-item label="主办单位" prop="organizer">
                  <el-input :disabled="detailFlage" style="width:300px" type="textarea" :rows="1" v-model="formConf.organizer" placeholder="请输入主办单位" clearable></el-input>
                </el-form-item>
                <el-form-item label="活动时间"  prop="dateRange2">
                  <!-- <div>2024/08/15 16:18:06-2025/08/15 16:18:06</div> -->
                  <el-date-picker
                    v-model="dateRange2"
                    @change="dateRangeChange2"
                    :disabled="detailFlage"
                    style="width:300px"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="['00:00:00', '23:59:59']"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="活动说明" prop="activeDesc">
                  <el-input :disabled="detailFlage" style="width:300px" type="textarea" :rows="1" v-model="formConf.activeDesc" placeholder="请输入活动说明" clearable></el-input>
                </el-form-item>
                <el-form-item label="结果查询" prop="activeQuery">
                  <el-input :disabled="detailFlage" style="width:300px" type="textarea" :rows="1" v-model="formConf.activeQuery" placeholder="请输入结果查询" clearable></el-input>
                </el-form-item>
                <el-form-item label="奖品兑换方式" prop="prizeMethod">
                  <!-- <el-input style="width:300px" type="textarea" :rows="1" v-model="formConf.prizeMethod" placeholder="请输入奖品兑换方式" clearable></el-input> -->
                  <el-select
                    v-model="formConf.prizeMethod"
                    placeholder="请选择奖品兑换方式"
                    :disabled="detailFlage"
                    clearable
                    style="width: 300px"
                  >
                    <el-option
                      v-for="dict in prizeMethodList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-card>
            </el-col>
            <!-- 活动规则 -->
            <el-col :xs="24" :md="24" :lg="11" style="position: absolute;left: 0px;top: 700px;">
              <el-card style="margin-bottom: 32px;height: 404px;">
                  <div slot="header">
                    <span><i class="el-icon-collection"></i> 活动规则</span>
                  </div>
                  <el-form-item label="每日抽奖时间" prop="dateRange3">
                    <el-time-picker
                    style="width:300px"
                    is-range
                    :disabled="detailFlage"
                    v-model="dateRange3"
                    @change="dateRangeChange3"
                    value-format="HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间">
                    </el-time-picker>
                  </el-form-item>
                  <el-form-item label="用户信息填写" prop="userInfoScan">
                    <!-- <span slot="label">
                      <span style="color: #FF574C;margin-right: 4px;">*</span>
                      <span>用户信息填写</span>
                    </span> -->
                    <el-checkbox-group @change="userInfoScanC" v-model="userInfoScan" size="small">
                      <el-checkbox-button  v-for="item in userInfoScanList" :label="item.value" :key="item.index">{{item.label}}</el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="用户信息" prop="userInfoMsg">
                    <el-checkbox-group
                      @change="userInfoMsgChange"
                      v-model="userInfoMsg"
                      style="margin-left: 16px"
                    >
                      <el-checkbox
                        v-for="(dict, key) in userInfoMsgList"
                        :label="dict.value"
                        :key="key"
                        :disabled="detailFlage"
                        >{{ dict.label }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="抽奖次数限制" prop="prizeLimit">
                    <!-- <span slot="label">
                      <span style="color: #FF574C;margin-right: 4px;">*</span>
                      <span>抽奖次数限制</span>
                    </span> -->
                    <el-checkbox-group @change="prizeLimitC" v-model="prizeLimit" size="small">
                      <el-checkbox-button v-for="item in prizeLimitList" :label="item.value" :key="item.index">{{item.label}}</el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="每个用户抽取" prop="userExtractionNum">
                    <el-input :disabled="detailFlage" type="number" style="width: 160px" v-model.number="formConf.userExtractionNum" placeholder="请输入" clearable></el-input>
                    <span class="tips">次/人</span>
                  </el-form-item>
                  <el-form-item label="中奖限制" prop="jackpotLimit" style="display: flex;">
                    <el-radio-group v-model="formConf.jackpotLimit" style="display: flex;flex-wrap: wrap;">
                      <el-radio :disabled="detailFlage" label="1" style="height: 32px;line-height: 32px;">单个用户单个奖品中一次</el-radio>
                      <el-radio :disabled="detailFlage" label="0" style="height: 32px;line-height: 32px;">单个用户单个活动中一次</el-radio>
                    </el-radio-group>
                  </el-form-item>
              </el-card>
            </el-col>
            <el-col v-if="!detailFlage" :xs="24" :md="24" :lg="11" style="position: absolute;left: 0px;top: 1115px;text-align: center;">
              <el-button size="small" type="primary" @click="nextStep">下一步</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-form v-if="activityTab==='form'" size="small" label-width="90px">
          <el-table v-loading="prizeConfigLoading" :data="noticeList">
            <el-table-column type="index" label="奖品序号" width="100" align="center" />
            <!-- <el-table-column label="奖品序号" align="center" prop="noticeId" width="100" /> -->
            <el-table-column
              label="奖品等级"
              align="center"
              prop="prizeLevel"
              width="200"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.prizeLevel"
                  placeholder="请选择奖品等级"
                  clearable
                  v-if="!detailFlage"
                  style="width:140px"
                >
                  <el-option
                    v-for="dict in prizeLevelList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
                <span v-else>
                  <span v-for="item in prizeLevelList" :key="item.index">
                    <span v-if="item.value == scope.row.prizeLevel">{{item.label}}</span>
                  </span>
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="分公司" align="center" prop="noticeType" width="100">
              <template slot-scope="scope">
                 {{scope.row.noticeType||'-'}}
              </template>
            </el-table-column> -->
            <el-table-column label="奖品名称" align="center" prop="prizeName" width="300">
              <template slot-scope="scope">
                <!-- <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span> -->
                <!-- <el-select
                  v-model="scope.row.prizeName"
                  placeholder="请选择奖品名称"
                  clearable
                  style="width:240px"
                >
                  <el-option
                    v-for="dict in dict.type.sys_normal_disable"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <el-input v-if="!detailFlage" v-model="scope.row.prizeName" style="width:240px"></el-input>
                <span v-else>{{scope.row.prizeName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖品图片" align="center" prop="status" width="360">
              <template slot-scope="scope">
                <div style="display:flex;align-items:center">
                    <el-select
                      v-if="(scope.row.prizeImage == null || scope.row.prizeImage == '') && scope.row.prizeImagemy.length == 0 && !detailFlage"
                      v-model="scope.row.prizeImage"
                      placeholder="尺寸为100*100，不超过"
                      clearable
                      style="width:240px"
                    >
                    <!-- :label="dict.label" -->
                      <el-option
                        v-for="(dict,index) in pictureArr"
                        :key="index"
                        :value="dict.url"
                        class="imageOption"
                      >
                        <el-image
                          style="width: 80px;"
                          :src="dict.url"
                          fit="contain">
                        </el-image>
                      </el-option>
                    </el-select>
                    <div style="width:240px" v-if="scope.row.prizeImage !== null && scope.row.prizeImage !== '' && scope.row.prizeImagemy.length == 0">
                      <el-image style="width: 100px; height: 100px" :src="scope.row.prizeImage" fit="contain"></el-image>
                    </div>
                    <el-button v-if="scope.row.prizeImage!==null && scope.row.prizeImage!=='' &&  scope.row.prizeImagemy.length == 0 && !detailFlage" style="margin-left: 4px;height:32px" type="primary" @click="resetPicture(scope.$index)" size="mini">重选</el-button>
                    <el-upload
                      v-if="!detailFlage"
                      style="display: flex; align-items: center;direction: rtl"
                      :ref="'uploadFile3_'+scope.$index"
                      :on-change="(file, fileList) => onChange3(file, fileList,scope.$index)"
                      action=""
                      :auto-upload="false"
                      class="upload-demo prizeImagemyUp"
                      :limit="1"
                      :on-preview="handlePreview3"
                      :on-remove="(file, fileList) =>handleRemove3(file, fileList,scope.$index)"
                      :file-list="scope.row.prizeImagemy"
                      list-type="picture">
                      <el-button style="margin-left: 4px;height:32px" type="primary" icon="el-icon-upload" size="mini">上传</el-button>
                    </el-upload>
                  </div>
              </template>
            </el-table-column>
            <el-table-column label="奖品数量" align="center" prop="prizeNum" width="200">
              <template slot-scope="scope">
                <div class="addSubtractDiv" v-if="!detailFlage">
                  <div class="addSubtract" @click="() => { if (scope.row.prizeNum > 0) { scope.row.prizeNum = Number(scope.row.prizeNum) - 1 }}">-</div>
                  <el-input  v-model.number="scope.row.prizeNum" class="addSubtractInput"></el-input>
                  <div class="addSubtract" @click="() => { scope.row.prizeNum = Number(scope.row.prizeNum) + 1}">+</div>
                </div>
                <span v-else>{{scope.row.prizeNum}}</span>
              </template>
            </el-table-column>
            <el-table-column label="每日中奖上限" align="center" prop="pizeUp" width="200">
              <template slot-scope="scope">
                <div class="addSubtractDiv" v-if="!detailFlage">
                  <div class="addSubtract" @click="() => { if (scope.row.pizeUp > 0 ) { scope.row.pizeUp = Number(scope.row.pizeUp) - 1 } }">-</div>
                  <el-input v-model.number="scope.row.pizeUp " class="addSubtractInput"></el-input>
                  <div class="addSubtract" @click="() => { scope.row.pizeUp = Number(scope.row.pizeUp) + 1 }">+</div>
                </div>
                <span v-else>{{scope.row.pizeUp}}</span>
              </template>
            </el-table-column>
            <el-table-column label="奖品剩余库存" align="center" prop="pizeRemaining" width="100" />
            <el-table-column label="商品剩余库存" align="center" prop="productRemaining" width="100">
              <!-- <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template> -->
            </el-table-column>
            <el-table-column label="概率" align="center" prop="probability" width="200">
              <template slot-scope="scope">
                <div class="addSubtractDiv" v-if="!detailFlage">
                  <div class="addSubtract"  @click="() => { if (scope.row.probability > 0 ) { scope.row.probability = Number(scope.row.probability) - 1 } }">-</div>
                  <el-input @input="() => $forceUpdate()"  v-model.number="scope.row.probability" class="addSubtractInput"></el-input>
                  <div class="addSubtract"  @click="() => { scope.row.probability = Number(scope.row.probability) + 1 }">+</div>%
                </div>
                <span v-else>{{scope.row.pizeUp}}</span>
              </template>
            </el-table-column>
            <el-table-column label="最低中奖活动人数" align="center" prop="minCount" width="200">
              <template slot-scope="scope">
                <div class="addSubtractDiv"  v-if="!detailFlage">
                  <div class="addSubtract"  @click="() => { if (scope.row.minCount > 0 && !detailFlage) { scope.row.minCount = Number(scope.row.minCount) - 1 } }">-</div>
                  <el-input @input="() => $forceUpdate()"  v-model.number="scope.row.minCount" class="addSubtractInput"></el-input>
                  <div class="addSubtract"  @click="() => {scope.row.minCount = Number(scope.row.minCount) + 1 }">+</div>
                </div>
                <span v-else>{{scope.row.pizeUp}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="!detailFlage" label="操作" align="center"  width="150" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh"
                   @click="() => { 
                    scope.row.noticeId = '',
                    scope.row.prizeNum = 0,
                    scope.row.pizeUp = 0,
                    scope.row.probability = 0,
                    scope.row.minCount = 0,
                    scope.row.pizeRemaining = 0,
                    scope.row.productRemaining = 0,
                    scope.row.prizeImagemy = [],
                    scope.row.prizeImage = ''
                    }"
                >重置</el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleDelete(scope.$index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 16px" v-if="!detailFlage">
            <el-button size="small" type="primary" @click="prevStep">上一步</el-button>
            <el-button size="small" type="primary" @click="submitBtn">保存</el-button>
            <el-button size="small" style="float: right;margin-right: 20px;" type="primary" @click="handleAdd">新增行</el-button>
          </div>
        </el-form>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import jpg from '@/assets/images/九宫格.png'
import ndj from '@/assets/images/扭蛋机.png'
import cjx from '@/assets/images/抽奖箱.png'
import bs1 from '@/assets/images/版式1.png'
import bs2 from '@/assets/images/版式2.png'
import bs3 from '@/assets/images/版式3.png'

import jp1 from '@/assets/images/jp/奖品1.png'
import jp2 from '@/assets/images/jp/奖品3.png'
import jp3 from '@/assets/images/jp/奖品4.png'
import jp4 from '@/assets/images/jp/奖品5.png'
import jp5 from '@/assets/images/jp/奖品6.png'
import jp6 from '@/assets/images/jp/奖品7.png'
import jp7 from '@/assets/images/jp/奖品8.png'
import jp8 from '@/assets/images/jp/奖品9.png'

export default{
  name: "ActivityRaffle",
  dicts: ['sys_normal_disable'],
  data () {
    return {
      imgsUrl: [jpg, ndj, cjx],
      imgsUrl2: [bs1, bs2, bs3],
      pictureArr:[
        {url: jp1},
        { url: jp2 },
        { url: jp3 },
        { url: jp4 },
        { url: jp5 },
        { url: jp6 },
        { url: jp7 },
        {url: jp8}
      ],
      detail:'N',
      activityId:'',
      // 总体遮罩层
      loading: false,
      // 卡片选中数组
      activityTab: 'field',
      // 奖品配置表格loading
      prizeConfigLoading: false,
      // 奖品配置表格数据
      noticeList: [],
      // 轮播图图片
      fileList: [
        // {name: 'food.jpeg', 
        // url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
      ],
      // 弹窗图片
      fileList2: [],
      value1: null,
      // validTimeStartStr validTimeEndStr
      dateRange: null,
      // activeTimeStartStr activeTimeEndStr
      dateRange2: null,
      // prizeTimeStartStr prizeTimeEndStr
      dateRange3: null,
      userInfoMsg: [],
      userInfoScan: [],
      prizeLimit: [],
      formConfCopy: {},
      formConf: {
        activityName:'',
        activityTitle: '',
        activityPlatform: '',
        validTimeStartStr:'',
        validTimeEndStr: '',
        organizer: '',
        organId: '',
        organName: '',
        channelCode: '',
        activeTimeStartStr: '',
        activeTimeEndStr:'',
        activeDesc: '',
        activeQuery: '',
        prizeMethod: '',
        prizeTimeStartStr: '',
        prizeTimeEndStr:'',
        userInfoScan:'',
        userInfoMsgStr: [],
        prizeLimit:'',
        userExtractionNum: '',
        jackpotLimit: '',
        userRight: '',
        template: '',
        skin:''
      },
      prizeMethodList: [],
      userInfoScanList: [],
      userInfoMsgList: [],
      prizeLimitList: [],
      userRightList: [],
      templateList: [],
      skinList:[],
      channelList:[],
      strategyOrgan:[],
      organizationList: [],
      organizationList_props: {
        multiple: false,
        label: "organName",
        value: "organCode",
        children: "childOrganList",
        checkStrictly: true,
      },
      prizeLevelList:[],
      //页面必填规则
      formConfRules:{
        // activityName:[
        //   { required: true, message: '请输入活动名称', trigger: 'blur' }
        // ],
        // activityTitle:[
        //   { required: true, message: '请输入页面标题', trigger: 'blur' }
        // ],
        // dateRange:[
        //   { required: true, message: '请选择有效期间', trigger: 'change' }
        // ],
        // dailyLotteryTime:[
        //   { required: true, message: '请选择每日抽奖时间', trigger: 'change' }
        // ],
        // extractUser:[
        //   { required: true, message: '请输入每个用户抽取次数', trigger: 'blur' }
        // ],
        // WinRestrict:[
        //   { required: true, message: '请选择中奖限制', trigger: 'change' }
        // ],
        // organId:[
        //   { required: true, message: '请选择机构', trigger: 'change' }
        // ],
        // channelCode:[
        //   { required: true, message: '请选择渠道', trigger: 'change' }
        // ],
        // userPermissions:[
        //   { required: true, message: '请选择用户权限', trigger: 'change' }
        // ],
        // template:[
        //   { required: true, message: '请选择模板', trigger: 'change' }
        // ],
        // skin:[
        //   { required: true, message: '请选择皮肤', trigger: 'change' }
        // ],
      }
    }
  },
  filters: {
    sizeFilter (v) {
      if (v / 1024 > 50) {
        return Math.floor(v / 1024 / 1024 * 100) / 100 + 'MB'
      }
      return Math.floor(v / 1024 * 100) / 100 + 'B'
    }
  },
  computed: {
    detailFlage () { 
      return this.detail == 'Y'
    }
  },
  created () { 
    this.getEnumList()
    this.getEnumList2()
    if (this.$route.query && this.$route.query.activityId) { 
      this.activityId = this.$route.query.activityId
      // this.getprizes()
    } else { 
      Object.assign(this.$data, this.$options.data())
    }
    if (this.activityId) { 
      this.getprizes()
    }
    if (this.$route.query && this.$route.query.detail) {
      this.detail = 'Y'
    } else { 
      this.detail = 'N'
    }
    this.activityTab = 'field'
    this.$forceUpdate()
  },
  watch: {
    "$route" (val,oldval){ 
      if (val!==oldval) { 
        this.getEnumList()
        this.getEnumList2()
        if (this.$route.query && this.$route.query.activityId) {
          this.activityId = this.$route.query.activityId
          // this.getprizes()
        } else { 
          Object.assign(this.$data, this.$options.data())
        }
        if (this.activityId) { 
          this.getprizes()
        }
        if (this.$route.query && this.$route.query.detail) {
          this.detail = 'Y'
        } else { 
          this.detail = 'N'
        }
        this.activityTab = 'field'
        this.$forceUpdate()
      }
    }
  },
  methods: {
    userInfoScanC (val) { 
      if (!this.detailFlage) {
        const type = val[val.length - 1]
        this.formConf.userInfoScan = type
        this.userInfoScan = [type]
      } else { 
        this.formConf.userInfoScan = this.formConfCopy.userInfoScan
        this.userInfoScan = [this.formConfCopy.userInfoScan]
      }
    },
    prizeLimitC (val) { 
      if (!this.detailFlage) {
        const type = val[val.length - 1]
        this.formConf.prizeLimit = type
        this.prizeLimit = [type]
      } else { 
        this.formConf.prizeLimit = this.formConfCopy.prizeLimit
        this.prizeLimit = [this.formConfCopy.prizeLimit]
      }
    },
    userInfoMsgChange (val) { 
      this.formConf.userInfoMsgStr = val
    },
    dateRangeChange (val) { 
      if (val.length > 0) {
        this.formConf.validTimeStartStr = val[0]
        this.formConf.validTimeEndStr = val[1]
      } else { 
        this.formConf.validTimeStartStr = ''
        this.formConf.validTimeEndStr = ''
      }
    },
    dateRangeChange2 (val) { 
      if (val.length > 0) {
        this.formConf.activeTimeStartStr = val[0]
        this.formConf.activeTimeEndStr = val[1]
      } else { 
        this.formConf.activeTimeStartStr = ''
        this.formConf.activeTimeEndStr = ''
      }
    },
    dateRangeChange3 (val) { 
      if (val.length > 0) {
        this.formConf.prizeTimeStartStr = val[0]
        this.formConf.prizeTimeEndStr = val[1]
      } else { 
        this.formConf.prizeTimeStartStr = ''
        this.formConf.prizeTimeEndStr = ''
      }
    },
    getprizes () {
      let url = ''
      let params = {}
      // if (this.activityId === '') {
        // url = "/prize/queryPrizeById"
        // params = {
        //   prizeId: this.prizeId
        // }
      //  } else { 
        url = "/prize/queryPrizeList"
        params = {
          activityId: this.activityId
        }
      // }
      axios.post(
        process.env.VUE_APP_BASE_API + url,params
        
      ).then(response => {
        if (response.data) {
          console.log(response.data)
          this.noticeList = response.data.rows || []
          this.noticeList.forEach(ele => { 
            ele.prizeImagemy = []
            // ele.pizeUp = 0
            // ele.pizeRemaining = 0
            // ele.productRemaining = 0
            // ele.probability = 0
            // ele.minCount = 0
            // this.$set(ele,'pizeUp',0)
            // this.$set(ele,'pizeRemaining',0)
            // this.$set(ele,'productRemaining',0)
            // this.$set(ele,'probability',0)
            // this.$set(ele,'minCount',0)
          })
        }
      }).catch(error => {
        console.error("Error fetching users:", error);
      })
    },
    strategyOrganChange (val) {
      if (val.length !== 0) {
        this.formConf.organId = val[val.length - 1]
        this.getParentId(this.organizationList,val[val.length - 1])
      } else { 
        this.formConf.organId = ''
      }
    },
    getData () { 
      axios.post(
          process.env.VUE_APP_BASE_API + "/activity/queryActivityById",
          { activityId:this.activityId }
        ).then(response => {
          if (response.data) {
            console.log(response.data)
            this.formConf.organId = response.data.organId || ''
            this.formConf = response.data
            this.formConfCopy = response.data
            if (response.data.validTimeStartStr && response.data.validTimeEndStr) {
              this.dateRange = [response.data.validTimeStartStr, response.data.validTimeEndStr]
            }
            if (response.data.activeTimeStartStr && response.data.activeTimeEndStr) {
              this.dateRange2 = [response.data.activeTimeStartStr, response.data.activeTimeEndStr]
            }
            if (response.data.prizeTimeStartStr && response.data.prizeTimeEndStr) {
              this.dateRange3 = [response.data.prizeTimeStartStr, response.data.prizeTimeEndStr]
            }
            if (response.data.prizeLimit) {
              this.prizeLimit = [response.data.prizeLimit]
            }
            if (response.data.userInfoScan) {
              this.userInfoScan = [response.data.userInfoScan]
            }
            if (response.data.userInfoMsgStr) {
              this.userInfoMsg = response.data.userInfoMsgStr
            }
            if (response.data.organId) {
              this.strategyOrgan = this.getParentId(this.organizationList, this.formConf.organId).reverse()
            }
          }
        }).catch(error => {
          console.error("Error fetching users:", error);
        })
    },
    getParentId(list, id) {
      for (let i in list) {
        if (list[i].organCode === id) {
          this.formConf.organName = list[i].organName;
          return [list[i].organCode];
        }
        if (list[i].childOrganList != null) {
          let node = this.getParentId(list[i].childOrganList, id);
          if (node !== undefined) {
            return node.concat(list[i].organCode);
          }
        }
      }
    },
    async getEnumList2 () { 
      try {
        const response = await axios.post(
          process.env.VUE_APP_BASE_API + "/activity/queryEnumList",
          {}
        )
        if (response.data.enumList) {
          if (response.data.enumList.enumPrizeMethod) {
            this.prizeMethodList = response.data.enumList.enumPrizeMethod
          }
          if (response.data.enumList.enumUserInfoScan) {
            this.userInfoScanList = response.data.enumList.enumUserInfoScan
          }
          if (response.data.enumList.enumUserInfoMsg) {
            this.userInfoMsgList = response.data.enumList.enumUserInfoMsg
          }
          if (response.data.enumList.enumPrizeLimit) {
            this.prizeLimitList = response.data.enumList.enumPrizeLimit
          }
          if (response.data.enumList.enumUserRight) {
            this.userRightList = response.data.enumList.enumUserRight
          }
          if (response.data.enumList.enumTemplate) {
            this.templateList = response.data.enumList.enumTemplate
          }
          if (response.data.enumList.enumSkin) {
            this.skinList = response.data.enumList.enumSkin
          }
        }
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
    async getEnumList() {
      try {
        const response = await axios.post(
          process.env.VUE_APP_BASE_API + "/strategy/queryEnumList",
          {}
        )
        if (response.data.enumList) {
          // if (response.data.enumList.activityType) {
          //   this.customerGroupList = response.data.enumList.activityType;
          // }
          if (response.data.enumList.channelType) {
            this.channelList = response.data.enumList.channelType
          }
          if (response.data.enumList.prizeLevel) {
            this.prizeLevelList = response.data.enumList.prizeLevel
          }
          if (response.data.enumList.organList) {
            this.organizationList = JSON.parse(
              response.data.enumList.organList
            )
            if (this.$route.query && this.$route.query.activityId) { 
              this.activityId = this.$route.query.activityId
              this.getData()
            }
          }
        }
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
    // tabs点击之前动作，阻止下一步按钮的下划线
    beforeLeave(tabName){
      // if(tabName== "CustoBtn") {
      //   return false
      // }else{
      //   return true
      // }
    },
    // 轮播图
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 轮播图
    handlePreview(file) {
      console.log(file,'gdsfgsdf');
    },
    // 弹框
    handleRemove2(file, fileList) {
      console.log(file, fileList);
    },
    // 弹框
    handlePreview2(file) {
      console.log(file,'gdsfgsdf');
    },
    // 奖品配置行图片
    handleRemove3(file, fileList,index) {
      // console.log(file, fileList);
      this.noticeList[index].prizeImagemy = []
    },
    // 奖品配置行图片
    handlePreview3(file) {
      console.log(file,'gdsfgsdf');
    },
    // 轮播图图片格式尺寸限制
    onChange (file) { 
      let limitflag = true
      let lastName = file.name.substring(file.name.length - 3, file.name.length)
      if (
        lastName.toLowerCase() !== 'png' &&
        lastName.toLowerCase() !== 'jpg'
      ) {
        this.$message.error('文件必须为.png .jpg类型')
        limitflag = false
        this.$refs.uploadFile.clearFiles()
        return false
      }
      // 创建一个Image对象
      const img = new Image()
      // 设置src属性为选中文件的临时路径
      img.src = file.url
      img.onload = () => {
        // 图片加载完成后，获取宽度和高度
        // console.log(`宽度: ${img.width}, 高度: ${img.height}`)
        if (img.width != 2448 || img.height != 882) {
          this.$refs.uploadFile.clearFiles()
          this.$message.error("上传图片尺寸只能是 710*240 px !")
          return false
        } else {
          if (file && limitflag) {
            this.fileList.push(file)
          }
        }
      }
    },
    // 弹窗图片格式尺寸限制
    onChange2 (file) { 
      let limitflag = true
      let lastName = file.name.substring(file.name.length - 3, file.name.length)
      if (
        lastName.toLowerCase() !== 'png' &&
        lastName.toLowerCase() !== 'jpg'
      ) {
        this.$message.error('文件必须为.png .jpg类型')
        this.$refs.uploadFile2.clearFiles()
        limitflag = false
        return false
      }
      // 创建一个Image对象
      const img = new Image()
      // 设置src属性为选中文件的临时路径
      img.src = file.url
      img.onload = () => {
        // 图片加载完成后，获取宽度和高度
        // console.log(`宽度: ${img.width}, 高度: ${img.height}`)
        if (img.width != 300 || img.height != 400) { 
          this.$refs.uploadFile2.clearFiles()
          this.$message.error("上传图片尺寸只能是 300*400 px !")
          return false
        } else {
          if (file && limitflag) {
            this.fileList2.push(file)
          }
        }
      }
    },
    // 奖品配置行图片上传
    onChange3(file,fileList,index){
      let limitflag = true
      let lastName = file.name.substring(file.name.length - 3, file.name.length)
      if (
        lastName.toLowerCase() !== 'png' &&
        lastName.toLowerCase() !== 'jpg'
      ) {
        this.$message.error('文件必须为.png .jpg类型')
        this.$refs['uploadFile3_'+index].clearFiles()
        limitflag = false
        return false
      }
      // 创建一个Image对象
      const img = new Image()
      // 设置src属性为选中文件的临时路径
      img.src = file.url
      img.onload = () => {
        // 图片加载完成后，获取宽度和高度
        // console.log(`宽度: ${img.width}, 高度: ${img.height}`)
        if (img.width != 2448 || img.height != 882) { 
          this.$refs['uploadFile3_'+index].clearFiles()
          this.$message.error("上传图片尺寸只能是 100*100 px !")
          return false
        } else {
          if (file && limitflag) {
            this.noticeList[index].prizeImage = ''
            this.noticeList[index].prizeImagemy.push(file)
          }
        }
      }
    },
    // 下一步按钮操作
    nextStep () {
      if (this.formConf.activityName.length==0) { 
        return this.$message.warning('活动名称不可为空')
      }
      if (this.strategyOrgan.length==0) { 
        return this.$message.warning('机构不可为空')
      }
      if (this.formConf.channelCode.length==0) { 
        return this.$message.warning('渠道不可为空')
      }
      axios.post(
        process.env.VUE_APP_BASE_API + "/activity/insertOrUpdateActivity",
        {
          activityId: this.activityId,
          // activityName: this.formConf.activityName,
          // organId:this.formConf.organId,
          // organName: this.formConf.organName,
          // channelCode:this.formConf.channelCode,
          ...this.formConf,
          activityGroup: 'up'
        }
      ).then(response => { 
        if (response.data.code == 200) {
          // console.log(response)
          this.activityId = JSON.parse(response.data.msg).activityId
          this.getprizes()
          // this.$message.success('新增成功')
          // this.$router.push({ path: '/activity/activitySelect',
            // query: {
            //   activityTabTop: 'seckill',
            // }
          // })
        }
      }).catch(error => { 
        console.error("Error fetching users:", error);
      })
      this.activityTab = 'form'
      this.$forceUpdate()
    },
    // 上一步按钮操作
    prevStep(){
      this.activityTab = 'field'
      this.$forceUpdate()
    },
    // 保存按钮操作
    submitBtn () {
      let resultArr = []
      this.noticeList.forEach(ele => { 
        resultArr.push({
          prizeName: ele.prizeName,
          prizeLevel: ele.prizeLevel,
          // prizeImage: "http://example.com/gold-medal.jpg",
          prizeImage: ele.prizeImage,
          prizeNum: ele.prizeNum,
          pizeUp: ele.pizeUp,
          pizeRemaining: ele.pizeRemaining,
          productRemaining: ele.productRemaining,
          probability: ele.probability,
          minCount: ele.minCount,
          activityId: this.activityId
        })
      })
      let params = {
        activityId:this.activityId,
        prizes:resultArr
      }
      axios.post(
        process.env.VUE_APP_BASE_API + "/prize/insertOrUpdatePrizeList",
        params
      ).then(response => { 
        if (response.data.code == 200) {
          this.$message.success('操作成功')
          this.$router.push({ path: '/activity/activitySelect',
            query: {
              activityTabTop: 'seckill',
            }
          })
        }
      }).catch(error => { 
        console.error("Error fetching users:", error);
      })
    },
    // 奖品配置行删除操作
    handleDelete (index) { 
      this.noticeList.splice(index,1)
    },
    // 奖品配置行新增操作
    handleAdd() { 
      this.noticeList.push(
        {
          prizeLevel: '',
          prizeName: '',
          prizeNum: 0,
          pizeUp: 0,
          probability: 0,
          pizeRemaining: 0,
          productRemaining: 0,
          minCount: 0,
          prizeImagemy: [],
          prizeImage: ''
        }
      )
    },
    // 奖品配置重新选择图片
    resetPicture(index) { 
      this.noticeList[index].prizeImage = ''
    },
  }
}
</script>
<style lang="scss" scoped>
.activity-raffle {
  padding-left: 20px;
  padding-bottom: 20px;
}
::v-deep .el-scrollbar__bar.is-horizontal{
    display: none !important;
  }
  .title1{
    font-size: 16px;
    padding:0px 20px 18px 20px;
    border-bottom: 1px solid #EBEEF5;
  }
  .tips{
    margin-left: 16px;
    font-size: 14px;
    color: #606266;
  }
  .columnCenter{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .btn {
  color: #495060;
  padding: 0px 8px;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  font-size: 12px;
}
.btn-img {
  padding: 0px 8px;
  height: 26px;
  line-height: 26px;
  border: 1px solid rgb(17,169,131);
  cursor: pointer;
  position: relative;
  color: #fff;
  font-size: 12px;
  background-color: rgb(17,169,131);
}
::v-deep .el-upload-list__item {
  width:144px !important;
  // height:122px !important;
  margin-left:4px
}
::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail{
  width:100px !important;
  // height:100px !important;
}
::v-deep .el-upload-list{
  display:flex !important;
  flex-wrap: wrap;
  width:100%;
}
.imageOption{
  height:104px !important;
}
.carouselImage ::v-deep.el-form-item__content{
  width:75% !important;
}
.addSubtractDiv{
  display: flex;
  justify-content: center;
  align-items: center;
}
.addSubtractInput{
  width:70px;
  margin-left:4px;
  margin-right: 4px;
}
.addSubtract{
  width: 36px;
  background-color: rgb(247,248,250);
  color: rgb(210,201,204);
  border: 1px solid rgb(210,201,204);
  border-radius: 4px;
}
</style>
